<script setup lang="ts">
import poster1 from "@/views/CanvasPost/poster1.jpg";
import "@leafer-in/editor";
import "@leafer-in/view";
import "@leafer-in/viewport"; // 导入视口插件(可选)

import "@leafer-in/resize";
import { onMounted } from "vue";
import { Leafer, Rect, App } from "leafer-ui";
import { Ruler } from "leafer-x-ruler";
import { onUnmounted } from "vue";

onMounted(() => {
  const app = new App({
    view: "leafer-view",
    tree: {
      type: "document",
    },
    editor: {
      editSize: "scale",
      lockRatio: true,
      moveable: "move",
      resizeable: "zoom",
      rotateable: false,
    }, //  配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层
  });

  const rect = new Rect({
    x: 100,
    y: 100,
    width: 400,
    fill: {
      type: "image",
      // url: poster1,
      url: "https://project-star.oss-cn-beijing.aliyuncs.com/assets/128.%E6%88%91%E7%8B%AC%E8%87%AA%E4%B8%80%E4%BA%BA%E8%A6%81%E8%B5%B0%E7%9A%84%E8%B7%AF_%E6%AD%8C%E8%B0%B1_%E5%8E%8B%E7%BC%A9.jpg",
    },
    draggable: true,
    editable: true,
  });
  app.tree.add(rect);
  app.tree.zoom("fit-width", 0, true);
});

onUnmounted(() => {});
</script>

<template>
  <div id="leafer-view"></div>
</template>

<style scoped>
#leafer-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
